<template>
	<view>
		<view class="smart-page-head"></view>
		<view>
			<video class="checkbox-item" style="width: 100%;height:400rpx;"
				src="http://picture.518-money.cn/18f875c85487a46140e71b6672b98c77c6f79a6e.mp4"></video>
		</view>
		<view class="spsy"></view>
		<view class="sp">
			<view class="b">大自然的魅力......</view>
			<view class="z">
				<view class="z-z">1.0万次播放</view>
				<view class="z-z">
					<image style="width: 30rpx;height: 30rpx;" src="@/static/dianzan.png"></image>3
				</view>
			</view>
			<view class="z">
				<view>
					<image style="width: 80rpx;height: 80rpx;" src="@/static/a.jpg"></image>
				</view>
				<view class="z-h">
					<view>好吃的好玩的</view>
					<view class="z-z">12-12</view>
				</view>
				<view class="reg-right">+关注</view>
			</view>
		</view>
		<view class="item">
			<view>为你推荐</view>
			<view class="e-item">
				<view class="e">
					<image style="width: 200rpx;height: 200rpx;" src="@/static/m.png"></image>
				</view>
				<view>
					<view class="e-right">大兴安岭出现超大型野兽，体重一吨比轿车还大，......</view>
					<view class="z">
						<view class="z-z1">动物大观察</view>
						<view class="z-z2">5.3万次播放</view>
					</view>
				</view>
			</view>
			<view class="e-item">
				<view class="e">
					<image style="width: 200rpx;height: 200rpx;" src="@/static/m.png"></image>
				</view>
				<view>
					<view class="e-right">大兴安岭出现超大型野兽，体重一吨比轿车还大，......</view>
					<view class="z">
						<view class="z-z1">动物大观察</view>
						<view class="z-z2">5.3万次播放</view>
					</view>
				</view>
			</view>
			<view class="e-item">
				<view class="e">
					<image style="width: 200rpx;height: 200rpx;" src="@/static/m.png"></image>
				</view>
				<view>
					<view class="e-right">大兴安岭出现超大型野兽，体重一吨比轿车还大，......</view>
					<view class="z">
						<view class="z-z1">动物大观察</view>
						<view class="z-z2">5.3万次播放</view>
					</view>
				</view>
			</view>
			<view class="e-item">
				<view class="e">
					<image style="width: 200rpx;height: 200rpx;" src="@/static/m.png"></image>
				</view>
				<view>
					<view class="e-right">大兴安岭出现超大型野兽，体重一吨比轿车还大，......</view>
					<view class="z">
						<view class="z-z1">动物大观察</view>
						<view class="z-z2">5.3万次播放</view>
					</view>
				</view>
			</view>
			</view>
			<view style="color:#c5c5c5; margin-bottom: 30rpx; margin-left: 20rpx;">
				热门评论
			</view>
			<view class="pl">
				<view>
					<image style="width: 80rpx;height: 80rpx;margin-left: 20rpx;" src="@/static/mmao.png"></image>
				</view>
				<view class="lp">
					<view class="pll">
						<view>
							<view class="zt1">狐友879303</view>
							<view class="sj">
								<view class="sjs">1小时前</view>
								<view class="sjs">广西桂林市</view>
							</view>
						</view>
						<view class="pl">
							<view class="plll">3</view>
							<view class="plll">
								<image style="width: 30rpx;height: 30rpx;" src="@/static/dianzan.png"></image>
							</view>
							<view class="plll">
								<image style="width: 30rpx;height: 30rpx;" src="@/static/xingxi.png"></image>
							</view>
						</view>
					</view>
					<view class="pll">保命要紧，何机再起</view>
				</view>
			</view>
			<view class="pl">
				<view>
					<image style="width: 80rpx;height: 80rpx; margin-left: 20rpx;" src="@/static/mmao.png"></image>
				</view>
				<view class="lp">
					<view class="pll">
						<view>
							<view class="zt1">网友872503</view>
							<view class="sj">
								<view class="sjs">2小时前</view>
								<view class="sjs">广西贵港市</view>
							</view>
						</view>
						<view class="pl">
							<view class="plll">7</view>
							<view class="plll">
								<image style="width: 30rpx;height: 30rpx;" src="@/static/dianzan.png"></image>
							</view>
							<view class="plll">
								<image style="width: 30rpx;height: 30rpx;" src="@/static/xingxi.png"></image>
							</view>
						</view>
					</view>
					<view class="pll">微笑生活，勇敢面对</view>
				</view>
			</view>
			<view class="pl">
				<view>
					<image style="width: 80rpx;height: 80rpx; margin-left: 20rpx;" src="@/static/mmao.png"></image>
				</view>
				<view class="lp">
					<view class="pll">
						<view>
							<view class="zt1">平安379373</view>
							<view class="sj">
								<view class="sjs">3小时前</view>
								<view class="sjs">广西河池市</view>
							</view>
						</view>
						<view class="pl">
							<view class="plll">1</view>
							<view class="plll">
								<image style="width: 30rpx;height: 30rpx;" src="@/static/dianzan.png"></image>
							</view>
							<view class="plll">
								<image style="width: 30rpx;height: 30rpx;" src="@/static/xingxi.png"></image>
							</view>
						</view>
					</view>
					<view class="pll">真看不懂，理解不了。</view>
				</view>
			</view>
			<view class="pl">
				<view>
					<image style="width: 80rpx;height: 80rpx; margin-left: 20rpx;" src="@/static/mmao.png"></image>
				</view>
				<view class="lp">
					<view class="pll">
						<view>
							<view class="zt1">交友896903</view>
							<view class="sj">
								<view class="sjs">5小时前</view>
								<view class="sjs">广西柳州市</view>
							</view>
						</view>
						<view class="pl">
							<view class="plll">9</view>
							<view class="plll">
								<image style="width: 30rpx;height: 30rpx;" src="@/static/dianzan.png"></image>
							</view>
							<view class="plll">
								<image style="width: 30rpx;height: 30rpx;" src="@/static/xingxi.png"></image>
							</view>
						</view>
					</view>
					<view class="pll">不应该/应该如何面对</view>
				</view>
			</view>
			<view class="xhx"></view>
			<view class="jz">已加载全部</view>
			<view class="xhxx"></view>
			<view class="zdb">
				<view>
					<image style="width: 40rpx;height:40rpx;" src="@/static/zjt.png"></image>
				</view>
				<view class="left">
					<input type="text" style="width: 180rpx; margin-right: 20rpx; font-size: 25rpx;" placeholder="我来说两句"
						class="search_input"></input>
				</view>
				<view class="jl">
					<image style="width: 30rpx; height: 30rpx;" src="@/static/xingxi.png"></image>
				</view>
				<view class="jl">
					<image style="width: 40rpx; height: 40rpx;" src="@/static/wjw.png"></image>
				</view>
				<view class="jl">
					<image style="width: 40rpx; height: 40rpx;" src="@/static/lj.png"></image>
				</view>
			</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.item{
		margin: 20rpx 20rpx 20rpx 20rpx;
	}
	.spsy{
		width: 100%;
		height: 400rpx;
	}
	.checkbox-item{
		position: fixed;
		top:85rpx;
		z-index: 1;
	}
	.sp{
		margin: 20rpx;
		border-bottom: 1rpx solid #999999;
	}
	.b{
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		font-size: 45rpx;
	}
	.reg-right{
		background: #dd524d;
		height: 50rpx;
		border-radius: 50rpx;
		color: #ffffff;
		width: 140rpx;
		text-align: center;
	}
	.c{
		display: flex;
		flex-direction: row;
	}
	.d{
		display: flex;
		flex-direction: row;
		border-bottom: 1rpx solid #d0d0d0;
	}
	.z{
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		margin-bottom: 30rpx;
	}
	.z-h{
		margin-right: 210rpx;
	}
	.z-z1{
		font-size: 30rpx;
		color: #c8c7cc;
		margin: 20rpx;
	}
	.z-z2{
		font-size: 30rpx;
		color:#c8c7cc;
		margin: 20rpx;
	}
	.z-z{
		font-size: 30rpx;
		color: #c8c7cc;
	}
	.e-item{
		display: flex;
		flex-direction: row;
	}
	.e-right{
		margin:20rpx;
		margin-top:40rpx;
	}
	.e{
		margin-top: 30rpx;
	}
	.pl{
		display: flex;
		flex-direction: ;
		margin-right: -280rpx;
		margin-bottom: 40rpx;
	}
	.lp{
		margin-left: -30rpx;
	}
	.pll{
		display: flex;
		flex-direction: ;
		justify-content: space-between;
		margin-left: 60rpx;
	}
	.plll{
		margin-right: 50rpx;
	}
	.xhx{
		border-bottom: 1rpx solid #c0c0c0;
		margin: 0rpx 20rpx 20rpx 100rpx;
	}
	.xhxx{
		border-bottom: 1rpx solid #d5d5d5;
		margin: 0rpx 20rpx 20rpx 10rpx;
		margin-bottom: 40rpx;
	}
	.jz{
		color: #c0c0c0;
		margin-left: 120rpx;
		margin-bottom: 80rpx;
	}
	.zdb{
		display: flex;
		flex-direction: row;
		background-color: #ffffff;
		width: 100%;
		height: 60rpx;
		position: fixed;
		bottom: 0rpx;
	}
	.left{
		height: 10rpx;
		margin-left: 20rpx;
	}
	.search_input{
		background-color: #f8f8f8;
		border-radius: 40rpx;
		padding: 5rpx 30rpx 6rpx 30rpx;
		margin-right: 1rpx;
	}
	.jl{
		margin-left: 80rpx;
	}
	.zt1{
		font-size: 30rpx;
		color: #007aee;
		margin-top: 10rpx;
	}
	.zdb{
		display: flex;
		flex-direction: row;
	}
	.left{
		height: 10rpx;
		margin-left: 20rpx;
	}
	.search_input{
		background-color: #f8f8f8;
		border-radius: 40rpx;
		padding: 5rpx 30rpx 6rpx 30rpx;
		margin-right: 1rpx;
	}
	.jl{
		margin-left: 90rpx;
	}
</style>
